<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WiFi灯控制</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#F97316',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .btn-toggle {
                transition: all 0.3s ease;
            }
            .btn-toggle.active {
                background-color: #F97316;
                color: white;
            }
            .light-indicator {
                transition: all 0.3s ease;
            }
            .light-indicator.on {
                color: #F97316;
                filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.7));
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-lg p-8 max-w-md w-full">
    <h1 class="text-2xl font-bold text-center mb-6 text-dark">WiFi智能灯控制</h1>

    <div class="flex flex-col items-center">
        <div id="lightIcon" class="light-indicator text-7xl mb-6">
            <i class="fa fa-lightbulb-o"></i>
        </div>

        <h2 id="statusText" class="text-xl font-medium mb-8 text-gray-500"></h2>

        <div class="flex gap-4 w-full">
            <button id="onBtn" class="btn-toggle flex-1 py-3 px-6 rounded-lg bg-gray-200 text-gray-700 font-medium shadow transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-power-off mr-2"></i> 打开
            </button>
            <button id="offBtn" class="btn-toggle flex-1 py-3 px-6 rounded-lg bg-gray-200 text-gray-700 font-medium shadow transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-power-off mr-2"></i> 关闭
            </button>
        </div>

        <div class="mt-6 text-sm text-gray-500">
            <p>设备IP: <span id="deviceIP">192.168.1.100</span></p>
        </div>
    </div>
</div>

<script>
    // 配置设备IP地址
    const DEVICE_IP = '192.168.228.245';
    const DEVICE_URL = `http://${DEVICE_IP}`;

    // DOM元素
    const onBtn = document.getElementById('onBtn');
    const offBtn = document.getElementById('offBtn');
    const lightIcon = document.getElementById('lightIcon');
    const statusText = document.getElementById('statusText');
    const deviceIP = document.getElementById('deviceIP');
    const lastUpdate = document.getElementById('lastUpdate');

    // 显示实际设备IP
    deviceIP.textContent = DEVICE_IP;

    // 初始获取状态
    updateStatus();

    // 绑定按钮事件
    onBtn.addEventListener('click', () => {
        controlLight('on');
    });

    offBtn.addEventListener('click', () => {
        controlLight('off');
    });

    // 控制灯状态
    function controlLight(action) {
        setLoading(true);

        fetch(`${DEVICE_URL}/${action}`)
            .then(response => response.text())
            .then(data => {
                console.log(data);
                // 等待500ms后再请求状态
                setTimeout(updateStatus, 500);
            })
            .catch(error => {
                console.error('Error:', error);
                // 移除错误提示，直接更新状态
                setTimeout(updateStatus, 1000);
                setLoading(false);
            });
    }

    // 更新灯状态
    function updateStatus() {
        fetch(`${DEVICE_URL}/status`)
            .then(response => response.text())
            .then(status => {
                console.log('Light status:', status);

                if (status === 'on') {
                    lightIcon.classList.add('on');
                    statusText.textContent = '灯状态: 已打开';
                    onBtn.classList.add('active');
                    offBtn.classList.remove('active');
                } else {
                    lightIcon.classList.remove('on');
                    statusText.textContent = '灯状态: 已关闭';
                    onBtn.classList.remove('active');
                    offBtn.classList.add('active');
                }

                // 更新时间
                const now = new Date();
                lastUpdate.textContent = `最后更新: ${now.toLocaleTimeString()}`;

                setLoading(false);
            })
            .catch(error => {
                console.error('Error fetching status:', error);
                // 移除错误提示，保持原有状态显示
                setLoading(false);
            });
    }

    // 设置加载状态
    function setLoading(isLoading) {
        if (isLoading) {
            onBtn.disabled = true;
            offBtn.disabled = true;
            onBtn.classList.add('opacity-50');
            offBtn.classList.add('opacity-50');
        } else {
            onBtn.disabled = false;
            offBtn.disabled = false;
            onBtn.classList.remove('opacity-50');
            offBtn.classList.remove('opacity-50');
        }
    }
</script>
</body>
</html>